import React, { Component } from "react";
import { Link } from "react-router-dom";
import _Http from "../config/api";
import {Notice} from '../config/omsLayer';
export default class Register extends Component {
  constructor(props) {
    super(props);
    this.state = {
      role:[
        {name_en:'service',name_cn:'售后专员',val:'1'},
        {name_en:'receiver',name_cn:'收货员',val:'2'},
        {name_en:'arrival test',name_cn:'拆包质检',val:'3'},
        {name_en:'technician',name_cn:'维修师',val:'4'},
        {name_en:'qc',name_cn:'质检',val:'5'},
        {name_en:'warehouse',name_cn:'仓管',val:'6'},
        {name_en:'delivery',name_cn:'发货员',val:'7'},
        {name_en:'manager',name_cn:'维修点经理',val:'8'},
        {name_en:'accountant',name_cn:'财务',val:'9'},
        {name_en:'sales',name_cn:'客户经理',val:'10'},
      ],
      translate:{
        cn:{
          "请选择" : "请选择",
          "用户名" : "用户名",
          "密码" : "密码",
          "真实姓名" : "真实姓名",
          "邮箱" : "邮箱",
          "职位" : "职位",
          "角色" : "角色",
          "注册" : "注册",
          "去登录" : "去登录",
          "用户名不能为空" : "用户名不能为空",
          "密码不能为空" : "密码不能为空",
          "真实姓名不能为空" : "真实姓名不能为空",
          "邮箱不能为空" : "邮箱不能为空",
          "职位不能为空" : "职位不能为空",
          "角色不能为空" : "角色不能为空",
          "注册成功! 将跳转到登陆页面." : "注册成功! 将跳转到登陆页面.",
          "系统消息" : "系统消息",
          "确定" : "确定",
        },
        en:{
          "请选择" : "Please choose",
          "用户名" : "Username",
          "密码" : "Password",
          "真实姓名" : "Full Name",
          "邮箱" : "Email",
          "职位" : "Position",
          "角色" : "Role",
          "注册" : "Register",
          "去登录" : "Login",
          "用户名不能为空" : "User name cannot be empty",
          "密码不能为空" : "Password cannot be empty",
          "真实姓名不能为空" : "Real name cannot be empty",
          "邮箱不能为空" : "Mailbox cannot be empty",
          "职位不能为空" : "The position cannot be empty",
          "角色不能为空" : "Characters can't be empty",
          "注册成功! 将跳转到登陆页面." : "Successful registration! Will go to the login page",
          "系统消息" : "System message",
          "确定" : "Sure",
        }
     }
    }
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  pageTr(){
    var _this = this,
        langIndex = _this.props.langKey,
        page = _this.state.translate[langIndex];
    return page;
  }
  validateForm(item, jq){
    var _this = this,
        page = _this.pageTr(),
        tempPos1 = jq('#'+item).find("input[name='account']"),
        tempPos2 = jq('#'+item).find("input[name='password']"),
        tempPos3 = jq('#'+item).find("input[name='userName']"),
        tempPos4 = jq('#'+item).find("input[name='email']"),
        tempPos5 = jq('#'+item).find("input[name='position']"),
        tempPos6 = jq('#'+item).find("select[name='role']");
    return Notice.isEmpty([
      {val:tempPos1.val(), item:tempPos1, msg:page['用户名不能为空']},
      {val:tempPos2.val(), item:tempPos2, msg:page['密码不能为空']},
      {val:tempPos3.val(), item:tempPos3, msg:page['真实姓名不能为空']},
      {val:tempPos4.val(), item:tempPos4, msg:page['邮箱不能为空']},
      {val:tempPos5.val(), item:tempPos5, msg:page['职位不能为空']},
      {val:tempPos6.val(), item:tempPos6, msg:page['角色不能为空']},
    ]);
  }
  handleSubmit(e) {
    var _this = this,
        formId = _this.refs.myForm.id,
        page = _this.pageTr(),
        langIndex = _this.props.langKey;
    (function($){
        if( _this.validateForm(formId, $)){
          _Http.post('/register.php', $('#'+formId).serialize())
          .then(function () {
            Notice.normal({
              content: page['注册成功! 将跳转到登陆页面.'],
              time: 4000,
              title:page['系统消息'],
              btn: page['确定'],
              end:function(){
                _this.props.history.push('/login');
              }
            })
          })
          .catch(function (error) {
            Notice.errorTips(error[langIndex]);
          });
        } 
    })(window.jQuery)

    e.preventDefault();//阻止表单的常规提交
  }
  componentWillUnmount(){
     // 组件即将销毁
     Notice.closeAll();
  }
  render() {
    var _this = this,
        role = _this.state.role,
        tempMenuList = [],
        page = _this.pageTr(),
        optionStr=[<option value="" key={0} >--{page['请选择']}--</option>];
    
    for(var i = 0; i < role.length; i++){
      optionStr.push(
        <option key={i+1} value={role[i].val}>{role[i][`name_${_this.props.langKey}`]}</option>
      );
    }
    var strHtmls = [
          {name:page['用户名'],html:<input type="text" className="form-control" name="account" />},
          {name:page['密码'],html:<input type="password" className="form-control" name="password" />},
          {name:page['真实姓名'],html:<input type="text" className="form-control" name="userName" />},
          {name:page['邮箱']+'(@dhhtgroup.com)',html:<input type="text" className="form-control" name="email" />},
          {name:page['职位'],html:<input type="text" className="form-control" name="position" />},
          {name:page['角色'],html:<select className="form-control" name="role" id="roleId">{optionStr}</select>},
        ] ;
  

    for(var j = 0, len = strHtmls.length;j < len; j++){
      tempMenuList.push(
        <div className="form-group" key={j}>
              <label htmlFor="input-username"><span className="red">*</span>{strHtmls[j].name}</label>
              <div className="input-group">
                <span className="input-group-addon"><i className="fa fa-pencil"></i></span>
                {strHtmls[j].html}
              </div>
            </div>
      );
    }
    return (
      <div className="panel-default formAction w400">
        <div className="panel-heading">
          <h1 className="panel-title"><i className="fa fa-user"></i>&nbsp;{page['注册']}</h1>
        </div>
        <div className="panel-body">
          <form action="#" id="registerForm" ref="myForm" onSubmit={this.handleSubmit}>
            {tempMenuList}
            <div className="text-right">
              <Link to='/login' className="btn btn-primary"><i className="fa fa-location-arrow"></i>&nbsp;{page['去登录']}</Link>
              <input type="submit" value={page['注册']} className="btn btn-primary" name="submits" />
            </div>
          </form>
        </div>
      </div>
    );

  }
}